<example name="QueryAssist">
  <file type="html" disable-auto-size>
    <div id="example">
    </div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import hubConfig from 'ring-ui-docs/components/hub-config';

    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';
    import Auth from '@jetbrains/ring-ui/components/auth/auth';
    import HTTP from '@jetbrains/ring-ui/components/http/http';

    const log = obj => {
      const div = document.createElement('div');
      div.innerHTML = JSON.stringify(obj);
      document.getElementById('example').appendChild(div);
    };

    const auth = new Auth(hubConfig);
    const http = new HTTP(auth, auth.getAPIPath());

    const dataSource = props => {
      const params = {
        query: {
          ...props,
          fields: 'query,caret,styleRanges' + (props.omitSuggestions ? '' : ',suggestions')
        }
      }

      return http.get('users/queryAssist', params);
    }

    auth.init().then(() => {
      render(
        <QueryAssist
          query="test"
          placeholder="placeholder"
          popupClassName="popupClassNameTest"
          glass={true}
          clear={true}
          onApply={log}
          focus={true}
          hint="lol"
          hintOnSelection="lol selected"
          popupClassName="test"
          dataSource={dataSource}
        />,
        document.getElementById('example')
      );
    });
  </file>
</example>

<example name="QueryAssist (no auth)">
  <file type="html" disable-auto-size>
    <div id="query-assist">
    </div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';

    const log = obj => {
      const div = document.createElement('div');
      div.innerHTML = JSON.stringify(obj);
      document.getElementById('query-assist').appendChild(div);
    };

    const dataSource = ({query, caret}) => ({
      query,
      caret,
      styleRanges: [
        {start: 0, length: 1, style: 'text'},
        {start: 1, length: 1, style: 'field_value'},
        {start: 2, length: 1, style: 'field_name'},
        {start: 3, length: 1, style: 'operator'}
      ],
      suggestions: [{
        prefix: 'login: ',
        option: 'test',
        suffix: ' ',
        description: '1',
        matchingStart: 0,
        matchingEnd: query.length,
        caret: 2,
        completionStart: 0,
        completionEnd: query.length,
        group: 'logins'
      }, {
        prefix: 'login: ',
        option: 'test.1',
        suffix: ' ',
        description: '2',
        matchingStart: 0,
        matchingEnd: query.length,
        caret: 2,
        completionStart: 0,
        completionEnd: query.length,
        group: 'logins'
      }]
    });

    render(
      <QueryAssist
        placeholder="placeholder"
        glass={true}
        clear={true}
        onApply={log}
        hint="hint"
        hintOnSelection="hint on selection"
        dataSource={dataSource}
      />,
      document.getElementById('query-assist')
    );
  </file>
</example>


<example name="QueryAssist in AngularJS">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <button ng-click="ctrl.disabled = !ctrl.disabled">Disable/Enable</button>

      <div ng-form="testForm">
        <p>{{ ctrl.query || 'no value' }}</p>
        <p>form is dirty = <strong>{{ testForm.$dirty }}</strong></p>

        <div react="QueryAssist"
          clear="true"
          x-data-source="ctrl.source(query, caret, omitSuggestions)"
          x-disabled="ctrl.disabled"
          glass="true"
          focus="ctrl.focus"
          ng-model="ctrl.query"
          on-apply="ctrl.save(query)"
          on-change="ctrl.change(query)"
          on-focus-change="ctrl.focusChange(focus)"
          placeholder="{{ placeholder }}"
          hint="{{ 'Press ⇥ to complete first item' }}"
          hint-on-selection="{{ 'Press ↩ to complete selected item' }}"></div>

        <p ng-repeat="query in ctrl.queries track by $index">{{ query }}</p>
      </div>
    </div>
  </file>

  <file type="js">
    import hubConfig from 'ring-ui-docs/components/hub-config';

    import angular from 'angular';
    import authNg from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
    import {
      registerComponents,
      reactNg
    } from '@jetbrains/ring-ui/components/react-ng/react-ng';
    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';
    registerComponents({QueryAssist});

    angular.module('test', [reactNg, authNg]).config(function (authProvider) {
      authProvider.config(hubConfig);
    }).controller('testCtrl', function ($http, $scope) {
      var ctrl = this;
      ctrl.queries = [];
      ctrl.query = 'query';
      ctrl.focus = true;
      ctrl.disabled = true;

      ctrl.save = function (query) {
        ctrl.queries.unshift(query);
        ctrl.query = null;
        $scope.$apply();
        $scope.testForm.$setPristine(true);
      };

      function updateScope(name, value) {
        if (ctrl[name] !== value) {
          ctrl[name] = value;

          if (!$scope.$root.$$phase) {
            $scope.$apply();
          }
        }
      }

      ctrl.change = function (query) {
        console.log('ctrl.change:: Query = ', query);
      };

      ctrl.focusChange = function (focus) {
        updateScope('focus', focus);
      };

      ctrl.source = function (query, caret, omitSuggestions) {
        var config = {
          params: {
            fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'),
            query: query,
            caret: caret
          }
        };

        return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config).
          then(function (data) {
            return data.data;
          });
      }
    });
  </file>
</example>

<example name="QueryAssist in AngularJS #2">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di rg-shortcuts-app rg-shortcuts="test"
      shortcuts-focus="true" shortcuts-map="ctrl.keys"
      ng-controller="testCtrl as ctrl">
      <div ng-show="!ctrl.query">Type something to init QueryAssist</div>

      <div ng-if="ctrl.query" react="QueryAssist"
        auto-open="true"
        clear="true"
        x-data-source="ctrl.source(query, caret, omitSuggestions)"
        glass="true"
        focus="ctrl.focus"
        ng-model="ctrl.query"
        on-apply="ctrl.save(query)"
        on-change="ctrl.change(query)"
        on-focus-change="ctrl.focusChange(focus)"
        placeholder="{{ placeholder }}"
        hint="{{ 'Press ⇥ to complete first item' }}"
        hint-on-selection="{{ 'Press ↩ to complete selected item' }}"></div>

      <p ng-repeat="query in ctrl.queries track by $index">{{ query }}</p>
    </div>
  </file>

  <file type="js">
    import hubConfig from 'ring-ui-docs/components/hub-config';

    import angular from 'angular';
    import authNg from '@jetbrains/ring-ui/components/auth-ng/auth-ng';
    import shortcutsNg from '@jetbrains/ring-ui/components/shortcuts-ng/shortcuts-ng';
    import {
      registerComponents,
      reactNg
    } from '@jetbrains/ring-ui/components/react-ng/react-ng';
    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';
    registerComponents({QueryAssist});

    angular.module('test', [reactNg, authNg, shortcutsNg]).
      config(function (authProvider) {
        authProvider.config(hubConfig);
      }).
      config(function (shortcutsProvider) {
        shortcutsProvider.
          mode({
            id: 'ring-shortcuts',
            shortcuts: [
              {
                key: 'down',
                action: 'next'
              }, {
                key: 'up',
                action: 'prev'
              }, {
                key: 'esc',
                action: 'main'
              }
            ]
          }).
          mode({
            id: 'test',
            shortcuts: [
              {
                key: 'any-character',
                action: 'init'
              }, {
                key: 'esc',
                action: 'destroy'
              }
            ]
          });
      }).
      controller('testCtrl', function ($http, $scope) {
        var ctrl = this;
        ctrl.queries = [];
        ctrl.query = '';
        ctrl.focus = true;
        ctrl.keys = {
          'init': e => {
            if (!ctrl.query) {
              e.preventDefault();
              ctrl.query = String.fromCharCode(e.charCode);
            }
          },
          'destroy': () => {ctrl.query = ''}
        }

        ctrl.save = function (query) {
          ctrl.queries.unshift(query);
          $scope.$apply();
        };

        function updateScope(name, value) {
          if (ctrl[name] !== value) {
            ctrl[name] = value;

            if (!$scope.$root.$$phase) {
              $scope.$apply();
            }
          }
        }

        ctrl.focusChange = function (focus) {
          updateScope('focus', focus);
        };

        ctrl.source = function (query, caret, omitSuggestions) {
          var config = {
            params: {
              fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'),
              query: query,
              caret: caret
            }
          };

          return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config).
            then(function (data) {
              return data.data;
            });
        }
      });
  </file>
</example>

<example name="Programmatically set focus to QueryAssist field">
  <file type="html" disable-auto-size>
    <button id="focusToggler">Toggle focus</button>
    <div id="query-assist">
    </div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist';

    const log = obj => {
      const div = document.createElement('div');
      div.innerHTML = JSON.stringify(obj);
      document.getElementById('query-assist').appendChild(div);
    };

    let focus = true;
    document.getElementById('focusToggler').addEventListener('click', function() {
        focus = !focus;
        renderComponent();
    });

    const dataSource = ({query, caret}) => ({
      query,
      caret,
      styleRanges: [
        {start: 0, length: 1, style: 'text'},
        {start: 1, length: 1, style: 'field_value'},
        {start: 2, length: 1, style: 'field_name'},
        {start: 3, length: 1, style: 'operator'}
      ],
      suggestions: [{
        prefix: 'login: ',
        option: 'test',
        suffix: ' ',
        description: '1',
        matchingStart: 0,
        matchingEnd: query.length,
        caret: 2,
        completionStart: 0,
        completionEnd: query.length,
        group: 'logins'
      }, {
        prefix: 'login: ',
        option: 'test.1',
        suffix: ' ',
        description: '2',
        matchingStart: 0,
        matchingEnd: query.length,
        caret: 2,
        completionStart: 0,
        completionEnd: query.length,
        group: 'logins'
      }]
    });

    function renderComponent() {
      console.log(focus);
      render(
        <QueryAssist
          placeholder="placeholder"
          glass={true}
          clear={true}
          focus={focus}
          onApply={log}
          hint="hint"
          hintOnSelection="hint on selection"
          dataSource={dataSource}
        />,
        document.getElementById('query-assist')
      );
    }

    renderComponent();
  </file>
</example>
